<!--
 * @Description: 通知视频首页
 * @Author: Kerwin
 * @Date: 2025-06-20 09:44:42
 * @LastEditTime: 2025-10-23 14:21:20
 * @LastEditors:  Please set LastEditors
-->

<template>
  <view class="container">
    <!-- 视频播放 -->
    <view> </view>

    <template v-if="videoList.length > 0">
      <view class="videoCore" v-for="(item, index) in videoList" :key="item.id">
        <!-- 这早 -->
        <view class="video-core" @click="toVideoDetail(item.id)">
          <!-- <video class="video" :id="item.id.toString()" :autoplay="false" :loop="true"
                :src="getImgFullPath(item?.videoUrl || '')"></video> -->
          <u-image
            :src="getImgFullPath(item?.imageUrl || '')"
            width="100%"
            height="300rpx"
          ></u-image>
          <!-- 播放 -->
          <view class="play-view">
            <div class="playBox">
              <u-image
                class="play"
                @click="videoPlay(index)"
                height="100%"
                src="https://image.blacksilverscore.com/uploads/4d06ea54-e6e1-4ebc-9b8c-b629b96bb9d9.png"
              ></u-image>
            </div>
          </view>
        </view>

        <view class="text">{{ item?.name }}</view>
      </view>
    </template>
    <!-- <view v-else class="empty">
            <u-empty text="暂无视频哦~" mode="list"></u-empty>
        </view> -->
    <u-loadmore v-if="showLoadmore" :status="status" />
  </view>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  getCurrentInstance,
  onMounted,
  computed,
  watch,
  nextTick
} from 'vue'
import {
  onLoad,
  onShow,
  onReady,
  onHide,
  onShareAppMessage,
  onPullDownRefresh
} from '@dcloudio/uni-app'
//api
import { baseApi, productApi, socialApi, enumAll } from '@/api'

//工具
import { getImgFullPath, getDistance } from '@/utils/index'
import HyAllType from '@/pages/index/hyAllType.vue'

const controls = ref(true)
const fullScreen = ref(false)
const videoList = ref([])
const type = ref<any>('')
const status = ref('loadmore')
const showLoadmore = ref(false)
const from = ref()
// 视频控件
function controlstoggle(e: { detail: { show: boolean } }) {
  controls.value = e.detail.show
}

// 全屏
function fullscreenchangeFn(e: { detail: { fullScreen: boolean } }) {
  fullScreen.value = e.detail.fullScreen
}

// 点击播放
function videoPlay(index: any) {
  //   const isPlay = displaySwiperList.value[index].isPlay
  //   const ctx = uni
  //     .createVideoContext(
  //       displaySwiperList.value[index].id.toString(),
  //       getCurrentInstance()
  //     )
  //   console.log(`点击${isPlay ? '暂停' : '播放'}`, index)
  //   try {
  //     isPlay ? ctx.pause() : ctx.play()
  //     displaySwiperList.value[index].isPlay = !isPlay
  //   } catch (e) {
  //     console.log('视频播放失败', e)
  //     displaySwiperList.value[index].isPlay = false
  //   }
}

const onVideoError = () => {
  console.log('视频播放失败')

  //   if (displaySwiperList?.value[displayIndex.value]?.isPlay) {
  //     displaySwiperList.value[displayIndex.value].isPlay = false
  //   }
}
// 视频详情页面
const toVideoDetail = (id: any) => {
  console.log('视频详情页面', id)
  uni.navigateTo({
    url: `/pages/shortVideo/video/videoDetail?id=${id}&from=${from.value}`
  })
}
//视频列表
const getVideoList = async () => {
  showLoadmore.value = true
  status.value = 'loading'
  // 获取视频列表
  const { data } = await baseApi.getAdvertisingList({
    noPaging: true,
    type: type.value
  })
  console.log('视频列表', data)
  if (data.length > 0) {
    videoList.value = data.filter((item: any) => {
      return item.status == 1
    })
    showLoadmore.value = false
  } else {
    showLoadmore.value = true
    status.value = 'nomore'
  }
}

onLoad((option) => {
  console.log(option, '传参')
  if (option?.from) {
    from.value = option.from
  }
  if (option?.type) {
    type.value = option.type
  } else {
    type.value = JSON.parse(uni.getStorageSync('hyType')).id
  }
  getVideoList()
  // console.log('视频加载完成')
})
</script>

<style lang="scss" scoped>
.container {
  margin-top: 20rpx;
  padding: 20rpx;
}

.videoCore {
  margin: 20rpx;
  margin-bottom: 40rpx;
  padding: 20rpx;

  background-color: #fff;
  // 阴影
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  border-radius: 20rpx;
  transition: all 0.3s ease-in-out;

  &.foled {
    transform: scale(0.32);
    margin-top: -50%;
  }

  &.noScale {
    transform: scale(1);
  }

  .video-core {
    position: relative;
  }

  .play-view {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    opacity: 0.6;
    z-index: 2;
  }

  .playBox {
    width: 100rpx;
    height: 100rpx;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    // opacity: 1;
    z-index: 2;
  }

  .video {
    width: 100%;
    height: 400rpx;
    border-radius: 20rpx;
    position: relative;
  }

  .play {
    width: 152rpx;
    height: 152rpx;
  }

  .text {
    margin: 20rpx 0;
    font-size: 28rpx;
    // color: #409eff;
  }
}

.empty {
  margin-top: 400rpx;
}
</style>
